<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>积分任务 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .tab-active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .task-item {
      border-bottom: 1px solid var(--border);
    }
    
    .task-item:last-child {
      border-bottom: none;
    }
    
    .task-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .progress-bar {
      height: 4px;
      border-radius: 2px;
      background-color: #f0f0f0;
    }
    
    .progress-fill {
      height: 100%;
      border-radius: 2px;
      background-color: var(--primary);
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="member_points.html" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">积分任务</h1>
      <a href="member_points_rules.html" class="text-sm primary-color">
        积分规则
      </a>
    </div>
    
    <!-- 标签页 -->
    <div class="px-4 border-b border-gray-200">
      <div class="flex">
        <div class="tab-active px-6 py-3 text-center">
          <span>每日任务</span>
        </div>
        <div class="px-6 py-3 text-center text-gray-500">
          <span>新手任务</span>
        </div>
        <div class="px-6 py-3 text-center text-gray-500">
          <span>成长任务</span>
        </div>
      </div>
    </div>
    
    <!-- 每日任务 -->
    <div id="daily-tasks" class="px-4 py-4">
      <!-- 每日签到 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-blue-50 text-blue-500 mr-3">
            <i class="fas fa-calendar-check text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">每日签到</h3>
                <p class="text-xs text-gray-500 mt-1">连续签到7天可获得额外奖励</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+3积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去签到
                </button>
              </div>
            </div>
            
            <div class="mt-3">
              <div class="flex justify-between text-xs text-gray-500 mb-1">
                <span>连续签到：3天</span>
                <span>7天</span>
              </div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 43%;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 浏览服务 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-green-50 text-green-500 mr-3">
            <i class="fas fa-eye text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">浏览服务</h3>
                <p class="text-xs text-gray-500 mt-1">浏览3个服务详情页</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+5积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去浏览
                </button>
              </div>
            </div>
            
            <div class="mt-3">
              <div class="flex justify-between text-xs text-gray-500 mb-1">
                <span>已浏览：1个</span>
                <span>3个</span>
              </div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 33%;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分享服务 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-yellow-50 text-yellow-500 mr-3">
            <i class="fas fa-share-alt text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">分享服务</h3>
                <p class="text-xs text-gray-500 mt-1">分享1个服务到微信/朋友圈</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+10积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去分享
                </button>
              </div>
            </div>
            
            <div class="mt-3">
              <div class="flex justify-between text-xs text-gray-500 mb-1">
                <span>已分享：0个</span>
                <span>1个</span>
              </div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 0%;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 收藏服务 -->
      <div class="task-item p-4 bg-white rounded-lg">
        <div class="flex items-start">
          <div class="task-icon bg-purple-50 text-purple-500 mr-3">
            <i class="fas fa-heart text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">收藏服务</h3>
                <p class="text-xs text-gray-500 mt-1">收藏2个感兴趣的服务</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+5积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-outline rounded-full bg-gray-100 text-gray-400 border-gray-200">
                  已完成
                </button>
              </div>
            </div>
            
            <div class="mt-3">
              <div class="flex justify-between text-xs text-gray-500 mb-1">
                <span>已收藏：2个</span>
                <span>2个</span>
              </div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 100%;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 新手任务 -->
    <div id="novice-tasks" class="px-4 py-4 hidden">
      <!-- 完善资料 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-blue-50 text-blue-500 mr-3">
            <i class="fas fa-user-edit text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">完善个人资料</h3>
                <p class="text-xs text-gray-500 mt-1">完善头像、姓名等基本信息</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+20积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去完善
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 绑定手机 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-green-50 text-green-500 mr-3">
            <i class="fas fa-mobile-alt text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">绑定手机号</h3>
                <p class="text-xs text-gray-500 mt-1">绑定手机号提高账号安全性</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+10积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-outline rounded-full bg-gray-100 text-gray-400 border-gray-200">
                  已完成
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 添加家庭成员 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-yellow-50 text-yellow-500 mr-3">
            <i class="fas fa-users text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">添加家庭成员</h3>
                <p class="text-xs text-gray-500 mt-1">添加至少1位家庭成员</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+15积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去添加
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 首次下单 -->
      <div class="task-item p-4 bg-white rounded-lg">
        <div class="flex items-start">
          <div class="task-icon bg-purple-50 text-purple-500 mr-3">
            <i class="fas fa-shopping-cart text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">首次下单</h3>
                <p class="text-xs text-gray-500 mt-1">完成首次服务订单</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+30积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去下单
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 成长任务 -->
    <div id="growth-tasks" class="px-4 py-4 hidden">
      <!-- 邀请好友 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-blue-50 text-blue-500 mr-3">
            <i class="fas fa-user-plus text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">邀请好友</h3>
                <p class="text-xs text-gray-500 mt-1">每邀请1位好友注册并完成首单</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+50积分/人</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去邀请
                </button>
              </div>
            </div>
            
            <div class="mt-3">
              <div class="flex justify-between text-xs text-gray-500 mb-1">
                <span>已邀请：1人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 评价订单 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-green-50 text-green-500 mr-3">
            <i class="fas fa-comment-dots text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">评价订单</h3>
                <p class="text-xs text-gray-500 mt-1">对已完成的订单进行评价</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+5积分/次</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去评价
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 连续下单 -->
      <div class="task-item p-4 bg-white rounded-lg mb-3">
        <div class="flex items-start">
          <div class="task-icon bg-yellow-50 text-yellow-500 mr-3">
            <i class="fas fa-calendar-week text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">连续下单</h3>
                <p class="text-xs text-gray-500 mt-1">连续3个月每月至少完成1笔订单</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+100积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  去下单
                </button>
              </div>
            </div>
            
            <div class="mt-3">
              <div class="flex justify-between text-xs text-gray-500 mb-1">
                <span>已完成：1个月</span>
                <span>3个月</span>
              </div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 33%;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 会员升级 -->
      <div class="task-item p-4 bg-white rounded-lg">
        <div class="flex items-start">
          <div class="task-icon bg-purple-50 text-purple-500 mr-3">
            <i class="fas fa-crown text-xl"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium">会员升级</h3>
                <p class="text-xs text-gray-500 mt-1">会员等级升级到银卡</p>
              </div>
              <div class="text-right">
                <div class="text-sm primary-color font-medium">+200积分</div>
                <button class="mt-1 px-3 py-1 text-xs btn-primary rounded-full">
                  查看详情
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 标签页切换
      const tabs = document.querySelectorAll('.px-4.border-b.border-gray-200 .px-6.py-3');
      const contentDivs = [
        document.getElementById('daily-tasks'),
        document.getElementById('novice-tasks'),
        document.getElementById('growth-tasks')
      ];
      
      tabs.forEach((tab, index) => {
        tab.addEventListener('click', function() {
          // 移除所有标签的激活状态
          tabs.forEach(t => {
            t.classList.remove('tab-active');
            t.classList.add('text-gray-500');
          });
          
          // 激活当前标签
          this.classList.add('tab-active');
          this.classList.remove('text-gray-500');
          
          // 显示对应内容，隐藏其他内容
          contentDivs.forEach((div, i) => {
            if (i === index) {
              div.classList.remove('hidden');
            } else {
              div.classList.add('hidden');
            }
          });
        });
      });
      
      // 任务按钮点击
      const taskButtons = document.querySelectorAll('.btn-primary.rounded-full');
      
      taskButtons.forEach(button => {
        button.addEventListener('click', function() {
          const taskName = this.closest('.flex-1').querySelector('h3').textContent;
          alert(`正在前往${taskName}任务`);
        });
      });
    });
  </script>
</body>
</html> 